<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://www.springframework.org/tags"  prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form"  prefix="form"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>내정보 수정하기</title>
<link rel="styleSheet" href="../css/ " type="text/css" />

<style type="text/css">
.join {
	font-size:12px;
	font-family:Impact;
	font-weight:bold;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	border:1px solid #f0dae5;
	padding:7px 12px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(12%, #f9f9f9), color-stop(93%, #e9e9e9) );
	background:-moz-linear-gradient( center top, #f9f9f9 12%, #e9e9e9 93% );
	background:-ms-linear-gradient( top, #f9f9f9 12%, #e9e9e9 93% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background-color:#f9f9f9;
	color:#8f7488;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.join:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(12%, #e9e9e9), color-stop(93%, #f9f9f9) );
	background:-moz-linear-gradient( center top, #e9e9e9 12%, #f9f9f9 93% );
	background:-ms-linear-gradient( top, #e9e9e9 12%, #f9f9f9 93% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background-color:#e9e9e9;
}.join:active {
	position:relative;
	top:1px;
}

</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function zipfind(user) { //zip폼 
	window.open("../main/zipForm.do","우편번호","scrollbars=yes, width=450, height=300, resizable=yes, menubar=no, top=150, left=260"); 
	return true; 
} 
function checkbox() {
    alert('정상적으로 수정 되었습니다.');
  }
window.onload = function(){
    //이메일체크이벤트
    document.getElementById('input_email').addEventListener('blur',emailChecker); 
    //전화번호체크이벤트
    document.getElementById('input_phone').addEventListener('blur',phoneChecker); 
}
function phoneChecker() { //전화번호 체크함수
	var obje = document.getElementById('input_phone').value;
	var regExp = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/;
	var resultStr = '';
	if(obje){
		if (!regExp.test(obje)) {
			resultStr = '<span id="result_false">잘못된 전화번호입니다. 숫자, - 를 포함한 숫자만 입력하세요. 예) 010-XXXX-XXXX"</span>';
			document.getElementById('phone_checker').innerHTML = resultStr;
			obje.value = obje.value.substring(0, obje.length - 1);
			pwFlag = false; //플래그값 true
			joinChecker(); //버튼체크
		} else {
			resultStr = '<span id="result_true">';
			document.getElementById('phone_checker').innerHTML = resultStr;
			joinChecker(); //버튼체크
		}
	}
}
function emailChecker() { //이메일 체크함수
	var obj = document.getElementById('input_email').value;
	var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
	var resultStr = '';
	if(obj){
			if (!regExp.test(obj)) {
					resultStr = '<span id="result_false">이메일형식에 맞춰 입력해주세요.</span>';
					document.getElementById('email_checker').innerHTML = resultStr;
					pwFlag = false; //플래그값 true
					joinChecker(); //버튼체크
				} else {
					resultStr = '<span id="result_true">';
					document.getElementById('email_checker').innerHTML = resultStr;
					joinChecker(); //버튼체크
				}
			}
	} 

</script>
</head>
<body>
<form:form commandName="memberCommand"  action="updateMember.do" method="post" name="command" >
	<img src="../images/member.png">
	<table width="600" border="0"  cellspacing="5" cellpadding="5" >
		<tr>
			<td colspan="6"><hr color="#e10380" size="3" ></td>
		</tr>
		<tr>
			<td bgcolor="#fadded">회원 아이디</td>
			<td>
				
				<form:hidden path="userid" value="${updateMember.userid}"/>${updateMember.userid}<br>	
			</td>
		</tr>
			<tr>
			<td bgcolor="#fadded"> 이름</td>
			<td>
			
				<form:hidden path="uname" value="${updateMember.uname}"/>${updateMember.uname}<br>	
			</td>
		</tr>
		<tr>
			<td bgcolor="#fadded">변경할 비밀번호</td>
			<td>
				 
				<form:password path="upwd" value="${updateMember.upwd}"/><br>	
			</td>
		</tr>
			<tr>
			<td bgcolor="#fadded">우편번호</td>
			<td>
				 
				<form:input path="uzipcode" name="uzipcode" value="${updateMember.uzipcode}" />
				 <input type="button" value="우편번호검색 " class="inputb" onclick = "zipfind(this.form)"> 
			</td>
		</tr>
		<tr>
			<td bgcolor="#fadded">주소</td>
			<td>
				
				<form:input path="uaddr" value="${updateMember.uaddr}" size="50"/><br>	
				<form:input path="uresaddr" value="${updateMember.uresaddr }" size="50"/><br>	
			
			</td>
		</tr>
		<tr>
			<td bgcolor="#fadded">연락처</td>
			<td>
				<form:input size="13" path="uphone" name="obje" id="input_phone"  value="${updateMember.uphone}" />
			 <span class="insertphone_checker" id="phone_checker" class="inputb">ex)010-1234-1234</span> 
			</td>
		</tr>
		<tr>
			<td bgcolor="#fadded">포인트</td>
			<td>
				
				${updateMember.upoint}<br>	
			</td>
		</tr>
		<tr>
			<td bgcolor="#fadded">이메일</td>
			<td>
				<form:input path="uemail" size="20" name="obj" id="input_email" class="insert_email" value="${updateMember.uemail}"/>
					<span class="insertemail_checker" id="email_checker" class="inputb">ex)giri@giri.com</span> 
			
			</td>
		</tr>
		
		<tr>
				<td align="right" colspan="2"><input type="submit" value="수정완료" class="join" onclick="checkbox();">
					<input type="button"  value="취소" onclick="location.href='index.do'" class="join">
				</td>
			</tr>
	
	</table>
	</form:form>
</body>
</html>